<template>
  <div class="page">
    <van-tabs class="mt-nav-tabs"
              active="{{ active }}"
              swipe-threshold="4"
              bind:change="onTabNavChange">
      <van-tab title="标签 1"></van-tab>
      <van-tab title="标签 2"></van-tab>
      <van-tab title="标签 3"></van-tab>
      <van-tab title="标签 4"></van-tab>
      <van-tab title="标签 5"></van-tab>
    </van-tabs>

    <van-tabs class="mt-content-tabs"
              active="{{ tabContentActive }}"
    >
      <van-tab title="">
        <div class="content">
          <tab-list-com1 id="com1"></tab-list-com1>
        </div>
      </van-tab>
      <van-tab title="">
        <div class="content">content2</div>
      </van-tab>
      <van-tab title="">
        <div class="content">content3</div>
      </van-tab>
      <van-tab title="">
        <div class="content">content4</div>
      </van-tab>
      <van-tab title="">
        <div class="content">content5</div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    let activeIndex = 0
    return {
      active: activeIndex,
      tabContentActive: activeIndex
    }
  },
  onReady() {

    this.selectComponent('#com1').fetchData()
  },
  methods: {
    onTabNavChange(e) {
      this.setData({
        tabContentActive: e.detail.index
      })
    }
  }
}
</script>

<style lang="scss">
page {
  height: 100%;
}

.page {
  color: $global-testvar;
  height: 100%;
}


$nav-line-height: 160rpx;
$tab-nav-height: $nav-line-height / 2;
.mt-nav-tabs {
  --tabs-nav-background-color: #efefef;
  .van-tabs--line .van-tabs__wrap {
    height: $nav-line-height;
  }
  .van-tabs__scroll--line {
    height: $nav-line-height;
  }
  .van-tabs__nav {
    top: 20rpx;
  }
  .van-tab {
    font-size: 24rpx;
    line-height: $tab-nav-height;
  }
}

.mt-content-tabs {
  display: block;
  --tabs-line-height: 0;
  //height: calc(100% - #{$nav-line-height});
}

.content {
  height: calc(100vh - #{$nav-line-height});
}

.scroll-view-item{
  height: 298rpx;
  border-bottom: 2rpx solid transparent;
  border-bottom-color: #efefef;
}
</style>
